<template>
    <div>
        <head-page class="header"></head-page>
        <div class="routers">
            <!-- 左侧导航部分-->
            <div class="asideLeft">
                <div class="nav_left_top"><img src="../../assets/images/reports_image/report.png" alt=""
                                               class="logo_img"></div>
                <ul class="list">
                    <li>
                        <router-link to="/caveatRecording" replace @click.native="toLinkIndex(0)">
                            <span>
                                <img src="../../assets/images/reports_image/alarm_selected-.png" alt=""
                                     v-show="linkIndex===0">
                                <img src="../../assets/images/reports_image/alarm_unselected.png" alt=""
                                     v-show="!(linkIndex===0)">
                                <span :class="{green:linkIndex==0}">报警记录</span>
                            </span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/offlineStatistics" @click.native="toLinkIndex(1)">
                            <span>
                                <img src="../../assets/images/reports_image/offline_selectd-.png" alt=""
                                     v-show="linkIndex===1">
                                <img src="../../assets/images/reports_image/offline_unselectd.png" alt=""
                                     v-show="!(linkIndex===1)">
                                <span :class="{green:linkIndex==1}">离线统计</span>
                            </span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/drivingStatistics" @click.native="toLinkIndex(2)">
                            <span>
                                <img src="../../assets/images/reports_image/time_selected.png" alt=""
                                     v-show="linkIndex===2">
                                <img src="../../assets/images/reports_image/time_unselected.png" alt=""
                                     v-show="!(linkIndex===2)">
                                <span :class="{green:linkIndex==2}">行车统计</span>
                            </span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/mileageStatistics" @click.native="toLinkIndex(3)">
                            <span>
                                <img src="../../assets/images/reports_image/mileage_selected-.png" alt=""
                                     v-show="linkIndex===3">
                                <img src="../../assets/images/reports_image/mileage_unselected.png" alt=""
                                     v-show="!(linkIndex===3)">
                                <span :class="{green:linkIndex==3}">里程统计</span>
                            </span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/totalMileageStatistics" @click.native="toLinkIndex(4)">
                            <span>
                                <img src="../../assets/images/reports_image/total_selected-.png" alt=""
                                     v-show="linkIndex===4">
                                <img src="../../assets/images/reports_image/total_unselected.png" alt=""
                                     v-show="!(linkIndex===4)">
                                <span :class="{green:linkIndex==4}">总里程查询</span>
                            </span>
                        </router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import headPage from '@/pages/header'

    export default {
        components: {
            headPage,
        },
        data: function () {
            return {
                linkIndex: 0
            }
        },
        methods: {
            toLinkIndex: function (index) {
                this.linkIndex = index
            }
        },
        mounted () {
            let router = this.$route.path
            switch (router) {
                case '/caveatRecording':
                    this.linkIndex = 0
                    break
                case '/offlineStatistics':
                    this.linkIndex = 1
                    break
                case '/drivingStatistics':
                    this.linkIndex = 2
                    break
                case '/mileageStatistics':
                    this.linkIndex = 3
                    break
                case '/totalMileageStatistics':
                    this.linkIndex = 4
                    break
                default:
                    this.linkIndex = 0
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
    }

    .routers {
        display: flex;
        height: 90vh;
    }

    .routers .asideLeft {
        width: 16%;
    }

    .nav_left_top {
        width: 100%;
        height: 23%;
        background: rgb(23, 203, 156);
        text-align: center;
        line-height: 1.9rem;
    }

    .list li {
        list-style: none;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: left;
        padding-left: 30%;
        font-size: 14px;
    }

    ul > li > a {
        color: white;
        text-decoration: none;
    }

    ul > li > a:hover {
        color: rgb(23, 203, 156);
    }

    li span {
        color: white;
    }

    .list {
        background: #2f3a40;
        color: white;
        width: 100%;
        height: 77%;
        margin: 0;
        padding-top: 0.5rem;
    }

    .list img {
        margin-right: 0.08rem;
        margin-top: -3px;
    }

    .list .green {
        color: rgb(23, 203, 156);
    }

    table td {
        height: 0.4rem;
    }

    table {
        margin: 0;
        padding: 0;
        border: 0;
        width: 16.41rem;
    }

    .top_nav .btn {
        display: block;
    }

</style>
